<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>



    // 局部变量 =
    // (1) 在函数内通过var关键词声明的变量叫做局部变量
    // (2)  形参也是一个局部变量

    // 特征
    // (1) 局部变量仅在函数内生效,对函数外没有任何影响
    // (2) 函数中的局部变量和方法仅在函数内有效, 当函数执行完毕,对应的局部变量和方法都会被释放, 下次函数调用时会重新生成

    // 全局变量
    // (1) 在函数外(脚本中)外通过var关键词声明的变量叫做全局变量

    // 作用域: 代码生效的区域
    // 局部作用域(函数作用域) => 变量和方法仅在函数内有效
    // 全局作用域:  自当前script标签开始的任何位置均可访问

    // 局部变量和全局变量混用
    // 对于函数而言: (1)  访问自己作用域内声明的变量   (2) 可以访问全局变量   => 先后顺序


    // 函数内访问变量和方法的顺序
    // (1) 自己有先找自己的 (访问自己作用域内声明的变量)
    // (2) 自己没有,向外跳一层找父作用域(包裹函数的作用域 => 函数作用域/全局作用域)
    // (3) 依此类推, 全都找不到,就找全局作用域, 全局作用域也找不到=> 变量/方法还未定义


    // 全局
    /* var a = 10;
    var b = 20;
    var c = a + b;
    console.log(a,b,c);
    
    function fn(){
        
        // 局部    => 自己有先找自己的
        var a = 100;
        var b = 200;
        var c = a + b;
        console.log("函数内", a,b,c);
    }


    fn();
    console.log(a,b,c); */





    // 全局
    /* var a = 10;  // 100
    var b = 20;  // 200
    var c = a + b;  // 300
    console.log(a,b,c); // 10 20 30
    
    function fn(){
        
        a = 100;
        b = 200;
        c = a + b;
        console.log("函数内", a,b,c); // 100 200 300
    }
    fn();
    console.log(a,b,c);// 100 200 300 */



    var a = 10; 
    var b = 20;  // 200
    var c = a + b;  // 300
    console.log(a,b,c); // 10 20 30
    
    function fn(){
        
        var a = 100; //局部 100
        b = 200;   // 全局
        c = a + b; //全局
        console.log("函数内", a,b,c); // 100 200 300
    }


    fn();
    console.log(a,b,c);// 10 200 300



    


</script>
</html>